<template>
    <div class="crowdL" v-if="this.arr.length!=0">
        <Topbar/>
        <img :src="this.arr[3].slider[0].backgroundImage1" alt="">
         <div class="box">
           <Pz v-for="(v,i) in arrb" 
            :key="i" 
            :cakeimage="v.cakeimage" 
            :cakename="v.cakename" 
            :cakeprice="v.cakeprice" 
            :cakeoriginal="v.cakeoriginal" 
            :goodsid="v.goodsid" 
            :cakeingredients="v.cakeingredients"
            />
        </div>
    </div>
</template>

<script>
import Pz from "@/components/ddgHD/popularzi.vue"
import Topbar from "@/components/ddgHD/topbar.vue"
import {getlink} from "@/api/getapi.js"
export default {
    components:{
        Pz,
        Topbar
    },
    data(){
        return {
            arrb:[],
             arr:[]
        }
    },
    mounted() {
        getlink("/data/ddg").then((ok)=>{
            this.arr=ok.data.data
            // console.log(this.arr)
        })
    },
     created(){
        getlink("http://180.76.121.47:8008/cake").then((ok)=>{
            ok.data.data.forEach((el)=>{
                if(el.typeid==1003){
                    this.arrb.push(el)
                    // console.log(el)
                }
            })
        })
    }
}
</script>

<style scoped>
    .crowdL{
        width: 100%;
        font-size: 0.12rem;
    }
    .box{
      width: 100%;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      padding: 0 0.14rem;
      flex-wrap: wrap;
    }
    img{
        width: 100%;
    }
</style>